
export default {
    data() {
        return {
            pieChart: null,
            timer: null
        }
    },

    methods: {
        renderPieChart(data, index = 0) {
            
            let item = data[index]

            let option = {
                title: [{
                      text: item.paid,
                      x: '25%',
                      y: '36%',
                      textAlign: 'center',
                      textStyle: {
                          fontSize: '30',
                          fontWeight: '100',
                          color: '#0FF',
                          textAlign: 'center',
                      },
                  }, {
                      text: '已付',
                      left: '25%',
                      top: '48%',
                      textAlign: 'center',
                      textStyle: {
                          fontSize: '16',
                          fontWeight: '400',
                          color: '#8d8793',
                          textAlign: 'center',
                      },
                  }, {
                      text: item.date,
                      left: '25%',
                      top: '57%',
                      textAlign: 'center',
                      textStyle: {
                          fontSize: '12',
                          fontWeight: '400',
                          color: 'rgba(65,63,112,1)',
                          textAlign: 'center',
                      },
                  },
                  
                  {
                    text: item.payable,
                    x: '75%',
                    y: '36%',
                    textAlign: 'center',
                    textStyle: {
                        fontSize: '30',
                        fontWeight: '100',
                        color: '#0FF',
                        textAlign: 'center',
                    },
                }, {
                    text: '未付',
                    left: '75%',
                    top: '48%',
                    textAlign: 'center',
                    textStyle: {
                        fontSize: '16',
                        fontWeight: '400',
                        color: '#8d8793',
                        textAlign: 'center',
                    },
                }, {
                    text: item.date,
                    left: '75%',
                    top: '57%',
                    textAlign: 'center',
                    textStyle: {
                        fontSize: '12',
                        fontWeight: '400',
                        color: 'rgba(65,63,112,1)',
                        textAlign: 'center',
                    },
                }],
                series: [
                  {
                    type: 'pie',
                    radius: ['46%', '50%'],
                    center: ['25%', '50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2
                    },
                    label: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      label: {
                        show: false,
                        fontSize: '40',
                        fontWeight: 'bold'
                      }
                    },
                    labelLine: {
                      show: false
                    },
                    data: [item.paid, item.total]
                  },
                  {
                    type: 'pie',
                    radius: ['46%', '50%'],
                    center: ['75%', '50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2
                    },
                    label: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      label: {
                        show: false,
                        fontSize: '40',
                        fontWeight: 'bold'
                      }
                    },
                    labelLine: {
                      show: false
                    },
                    data: [item.payable, item.total]
                  }
                ]
              }

            this.pieChart.setOption(option)

            this.timer = setTimeout(() => {
                console.log(index)
                // 如果是最后一条数据，需要从0开始遍历
                if (index < (data.length - 1)) {
                    this.renderPieChart(data, index + 1)
                } else {
                    // this.renderPieChart(data, 0)
                    this.renderPieChart(data)
                }
            }, 1500)
        }
    }
}